import React from 'react';
import { Card, Row, Col, Statistic, Typography } from 'antd';
import {
  FileImageOutlined,
  AudioOutlined,
  UserOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';

const { Title } = Typography;

const Dashboard: React.FC = () => {
  return (
    <div className="dashboard">
      <Title level={3} style={{ marginBottom: 24 }}>控制台</Title>
      
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="图片数量"
              value={86}
              prefix={<FileImageOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="音频数量"
              value={24}
              prefix={<AudioOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="用户数量"
              value={8}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="运行时间"
              value={15}
              suffix="天"
              prefix={<ClockCircleOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} lg={16}>
          <Card title="最近活动" style={{ height: '100%' }}>
            <div style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}>
              暂无最近活动
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card title="快捷操作" style={{ height: '100%' }}>
            <div style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}>
              暂无快捷操作
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
